<!-- 首页 -->
<template>
  <view class="box-sizing-b w-full">
    <!-- 01. 头部组件 -->
    <home-header
      ref="homeHeaderRef"
      :search-tip="searchTip"
      :search-auto="searchAuto"
      @search="search"
    />
    <!-- 02. 轮播区 -->
    <aster-swiper ref="asterSwiperRef" :swiperDatas="swiperDatas" />
    <view class="gap" />
    <!-- 03. 分类区 -->
    <home-category ref="homeCategoryRef" :categoryDatas="categoryDatas" />
    <view class="gap" />

    <!-- 04. 限时秒杀 -->
    <home-limit
      ref="homeLimitRef"
      :limitDatas="limitDatas"
      :limitTitle="limitTitle"
      :type="limitType"
    />
    <view class="gap" />

    <!-- 05. 猜你喜欢 -->
    <view class="goodsBox">
      <guess-like ref="guessLikeRef" type="home" />
    </view>
    <!-- 置顶 -->
    <back-top :scroll-top="scrollTop" />

    <!-- #ifdef MP-WEIXIN -->
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
  import { nextTick, ref } from 'vue';
  import {
    onLoad,
    onPageScroll,
    onPullDownRefresh,
    onReachBottom,
    onShow,
  } from '@dcloudio/uni-app';
  import { getHomeData } from '@/services/api/tabbar/home';
  import { ImageModel, LimitModel } from '@/services/model/homeModel';
  import HomeHeader from '@/components/tabbar/home-header.vue';
  import AsterSwiper from '@/components/common/aster-swiper.vue';
  import HomeCategory from '@/components/tabbar/home-category.vue';
  import HomeLimit from '@/components/tabbar/home-limit.vue';
  import GuessLike from '@/components/goods/guess-like.vue';
  import BackTop from '@/components/common/back-top.vue';

  // 组件引用
  const homeHeaderRef = ref();
  const asterSwiperRef = ref();
  const homeCategoryRef = ref();
  const homeLimitRef = ref();

  /** 轮播 */
  const swiperDatas = ref<Array<ImageModel>>([]);
  /** 分类 */
  const categoryDatas = ref<Array<ImageModel>>([]);
  /** 秒杀 */
  const limitDatas = ref<Array<LimitModel>>([]);
  const limitTitle = ref<string>('');
  const limitType = ref<string>('0');
  /** 猜您喜欢 */
  const guessLikeRef = ref();
  /** 置顶 */
  const scrollTop = ref();

  /**
   * 获取首页数据
   */
  const loadData = (callback: Function) => {
    getHomeData().then(({ data }) => {
      console.log('======首页======');
      // 轮播
      swiperDatas.value = data.data.carousel;
      // 分类
      categoryDatas.value = data.data.category;
      // 限时秒杀
      limitDatas.value = data.data.limit.data;
      limitTitle.value = data.data.limit.title;
      limitType.value = data.data.limit.type;
      callback();
    });
  };

  // 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
  onLoad(() => {
    // 加载首页数据
    loadData(() => {});
  });

  // 当 uni-app 启动，或从后台进入前台显示
  onShow(() => {});

  onPageScroll((e: any) => {
    scrollTop.value = e.scrollTop;
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    loadData(() => {
      uni.stopPullDownRefresh();
    });
    nextTick(() => {
      guessLikeRef.value.getGuessData(1);
    });
  });

  // 页面滚动到底部的事件
  onReachBottom(() => {
    guessLikeRef.value.getGuessData();
  });

  // 头部参数
  const searchAuto = ref(!0);
  const searchTip = ref('请输入搜索关键字');
  const search = () => {
    console.log('home search');
  };
</script>

<style scoped lang="scss">
  page {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  .goodsBox {
    position: relative;
    width: 100%;
    padding: 0 20rpx;
  }
</style>
